<template>
  <div class="dashboard-container">
    <h1 class="page-title">系统概览</h1>
    
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="6" v-for="(item, index) in cards" :key="item.title">
        <el-card class="dashboard-card" :class="`card-${index+1}`">
          <div class="card-header">{{ item.title }}</div>
          <div class="card-content">
            <svg class="card-icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
            <span class="card-value">{{ item.data }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <div class="dashboard-time">{{ currentTime }}</div>
    
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="chart-container">
      <div class="chart-header">
        <h2 class="chart-title">统计数据分析</h2>
        <div class="chart-subtitle">图书馆数据概览</div>
      </div>
      <div id="main" class="chart-main"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {ElMessage} from "element-plus";
import request from "../utils/request";

export default {
  data() {
    return {
      cards: [
        { title: '已借阅', data: 100, icon: '#iconlend-record-pro' },
        { title: '总访问', data: 100, icon: '#iconvisit' },
        { title: '图书数', data: 100, icon: '#iconbook-pro' },
        { title: '用户数', data: 1000, icon: '#iconpopulation' }
      ],
      data:{},
      currentTime: '',
      chartColors: {
        primary: '#3a7bd5',
        secondary: '#00d2ff',
        success: '#67c23a',
        warning: '#e6a23c'
      }
    }
  },
  created() {

  },
  mounted() {
    this.circleTimer()

    request.get("/dashboard").then(res=>{
      if(res.code == 0)
      {

        this.cards[0].data = res.data.lendRecordCount
        this.cards[1].data = res.data.visitCount
        this.cards[2].data = res.data.bookCount
        this.cards[3].data = res.data.userCount

      }
      else
      {
        ElMessage.error(res.msg)
      }


      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      console.log(this.cards[0].data)
      
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          },
          padding: [10, 15]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.cards.map(item => item.title),
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            interval: 0,
            rotate: 0
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#eee',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '50%',
            label: { 
              show: true, 
              position: 'top',
              color: '#666',
              fontSize: 14,
              fontWeight: 'bold'
            },
            itemStyle: {
              borderRadius: [6, 6, 0, 0],
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            },
            data: [
              {
                value: this.cards[0].data,
                itemStyle: { 
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: this.chartColors.primary },
                    { offset: 1, color: '#4a8cff' }
                  ]) 
                }
              },
              {
                value: this.cards[1].data,
                itemStyle: { 
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: this.chartColors.secondary },
                    { offset: 1, color: '#00c6ff' }
                  ]) 
                }
              },
              {
                value: this.cards[2].data,
                itemStyle: { 
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: this.chartColors.success },
                    { offset: 1, color: '#7ed321' }
                  ]) 
                }
              },
              {
                value: this.cards[3].data,
                itemStyle: { 
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: this.chartColors.warning },
                    { offset: 1, color: '#f5a623' }
                  ]) 
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              }
            }
          }
        ]
      })
      
      // 响应式调整
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    })
  },
  methods: {
    circleTimer() {
      this.getTimer()
      setInterval(() => {
        this.getTimer()
      }, 1000)
    },
    getTimer() {
      var d = new Date()
      this.currentTime = d.toLocaleString()
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  border-left: 4px solid var(--primary-color);
  padding-left: 10px;
}

.dashboard-cards {
  margin-top: 20px;
}

.dashboard-card {
  height: 140px;
  transition: all 0.3s;
  border: none;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-1 {
  background: linear-gradient(135deg, var(--primary-color) 0%, #4a8cff 100%);
}

.card-2 {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #00c6ff 100%);
}

.card-3 {
  background: linear-gradient(135deg, var(--success-color) 0%, #7ed321 100%);
}

.card-4 {
  background: linear-gradient(135deg, var(--warning-color) 0%, #f5a623 100%);
}

.card-header {
  font-size: 16px;
  color: white;
  padding: 15px 20px 0;
  font-weight: 500;
}

.card-content {
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
}

.card-icon {
  font-size: 40px;
  width: 50px;
  height: 50px;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 15px;
}

.card-value {
  font-size: 32px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dashboard-time {
  margin: 20px 0;
  font-size: 16px;
  color: var(--text-secondary);
  text-align: right;
  padding-right: 15px;
  font-weight: 500;
}

.chart-container {
  background-color: white;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow);
  padding: 20px;
  margin-top: 20px;
  overflow: hidden;
}

.chart-header {
  text-align: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.chart-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.chart-main {
  width: 100%;
  height: 450px;
}
</style>